<template>
  <div class="ebook">
      <!-- 上方导航栏 -->
      <transition name="slide-down">
        <div class="title-wrapper" 
        v-show="ifTitleAndMenuShow">
            <div class="left">
                <span class="icon-left icon"></span>
            </div>
            <div class="right">
                <div class="icon-wrapper">
                    <span class="icon-gouwuche-copy icon"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-yonghu icon"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-more-vertical-copy icon"></span>
                </div>
            </div>
        </div>
      </transition>
      <!-- 主体 -->
      <div class="read-wapper">
          <div id="read"></div>
          <div class="mask">
              <div class="left" @click="prevPage"></div>
              <div class="center" @click="toggleTitleAndMenu"></div>
              <div class="right" @click="nextPage"></div>
          </div>
      </div>
      <!-- 下方导航栏 -->
      <transition name="slide-up">
        <div class="menu-wrapper"
        v-show="ifTitleAndMenuShow">
            <div class="icon-wrapper">
                <span class="icon-toggle icon"></span>
            </div>
            <div class="icon-wrapper">
                <span class="icon-Progressread icon"></span>
            </div>
            <div class="icon-wrapper">
                <span class="icon-sun icon"></span>
            </div>
            <div class="icon-wrapper">
                <span class="icon-a icon">A</span>
            </div>
        </div>
      </transition>
  </div>
</template>

<script>
// 解析epub
// 导入 epubjs
import Epub from 'epubjs'
global.ePub = Epub

// 定义一个变量, 指向电子书的下载路径
const DOWNLOAD_URL = '/static/Mingking.epub'

export default {
    data () {
        return {
            // 设置一个控制导航栏显隐的变量
            // 通过 v-show 控制 显隐
            ifTitleAndMenuShow: false
        }
    },
    
    // 在methods中定义方法, 对电子书解析和渲染
    methods: {

        // 在主体的 center 中定义的 显示导航栏的方法
        toggleTitleAndMenu() {
            this.ifTitleAndMenuShow = !this.ifTitleAndMenuShow
        },

        prevPage() {
            // Rendition.prev
            if (this.rendition) {
                this.rendition.prev()
            }
        },

        nextPage() {
            if (this.rendition) {
                this.rendition.next()
            }
        },
        
        // 电子书的解析和渲染
        showEpub() {
            console.log(1)
            // 1.生成 Book 对象
            this.book = new Epub(DOWNLOAD_URL)
            // console.log(this.book);

            // 2.生成 Rendition 对象
            // 通过 Book.renderTo
            this.rendition = this.book.renderTo('read', {
                width: window.innerWidth,
                height: window.innerHeight
            })

            // 3.同通过 Rendition.display 渲染电子书
            this.rendition.display()
            // console.log(this.rendition);
        }
    },
    // 在生命周期钩子函数 mounted 中调用这个方法
    mounted() {
        this.showEpub()
    }
}
</script>

<style lang="scss" scoped>
// 导入 global.scss 文件
@import 'assets/styles/global.scss';
.ebook {
    // 父级绝对定位
    position: relative;

    // 上方导航栏样式
    .title-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 101;
        display: flex;
        width: 100%;
        height: px2rem(48);
        background: wheat;
        // 下方阴影
        box-shadow: 0 px2rem(8) px2rem(8) rgba(0, 0, 0, 0.15);
        .left {
            flex: 0 0 px2rem(60);
            // 引入 全局定义global.css中定义的center
            // 实现居中
            @include center;
        }
        .right {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            .icon-wrapper {
                flex: 0 0 px2rem(40);
                @include center;
                // 引入的购物车图标略小,这里修改以下
                .icon-gouwuche-copy {
                    font-size: px2rem(22);
                    // font-weight: 600;
                }
            }
        }
    }


    // 主题样式
    .read-wapper {
        .mask {
            // mask 绝对定位
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            display: flex;
            .left {
                flex: 0 0 px2rem(100);
            }
            .center {
                flex: 1;
            }
            .right {
                flex: 0 0 px2rem(100);
            }
        }
    }

    // 下方导航栏样式
    .menu-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 101;
        display: flex;
        width: 100%;
        height: px2rem(48);
        background: wheat;
        // 下方阴影
        box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, 0.15);
        .icon-wrapper {
            flex: 1;
            @include center;

            .icon-Progressread {
                font-size: px2tem(28);
                font-weight: 900;
            }
            .icon-sun {
                font-size: px2rem(22);
            }
        }
    }

    // 导航栏显隐过度动画在 global.css中定义
}
</style>